<template>
  <div class="app-container om-report-box">
    <el-row :gutter="10" class="mb8 operation-btn">
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasPermi="['om:report:query']"
          plain
          icon="el-icon-menu"
          size="mini"
          @click="checkleAll"
          >查询所有</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          v-hasPermi="['om:report:export']"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          v-hasPermi="['om:report:print']"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="handlePrint"
          >打印</el-button
        >
      </el-col>
      <div class="material-sort">
        <span
          :class="{ 'sort-active': sortIndex == index }"
          v-for="(item, index) in optionsSupplyType"
          :key="index"
          @click="handleSort(item, index)"
          >{{ item.dictLabel }}</span
        >
      </div>
    </el-row>
    <!-- 打印数据 -->
    <PrintPage
      v-if="printStatus"
      :printData="printData"
      ref="startPrint"
      :title="printName"
    />
    <!-- 数据 -->
    <el-table
      v-loading="loading"
      ref="tableData"
      :data="basicfileList"
      border
      :height="maxHeight"
    >
      <el-table-column
        type="index"
        width="60"
        align="center"
        label="序号"
        :key="1"
      >
      </el-table-column>
      <el-table-column
        label="销售员"
        align="center"
        prop="workStaff"
        width="80"
      >
      </el-table-column>

      <el-table-column
        label="销售订单号"
        align="center"
        prop="omCode"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="业务类型"
        align="center"
        prop="workType"
        width="80"
      >
      </el-table-column>
      <el-table-column label="订单交期" align="center" width="100">
        <template v-slot="scope">
          <div>
            <span>{{ scope.row.deliverDate }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交期状态" align="center" width="80">
        <template v-slot="scope">
          <div>
            <span style="color: ">{{
              scope.row.deliverStatus | filterDeliver
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="物料编码"
        align="center"
        prop="invCode"
        width="120"
      >
      </el-table-column>
      <el-table-column label="物料名称" align="center">
        <template v-slot="scope">
          <div>
            <span>{{ scope.row.invName }} {{ scope.row.invAttribute }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="订单数量"
        align="center"
        prop="quantity"
        width="150"
      >
        <template v-slot="scope">
          <div style="text-align: right">
            <span>{{ scope.row.quantity }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="质量要求" align="center" width="200">
        <template v-slot="scope">
          <div>
            <el-popover placement="left" width="350" trigger="click">
              <div style="white-space: pre-line">
                {{ scope.row.qualityRemarks }}
              </div>
              <div class="quality-box" slot="reference">
                <p style="">{{ scope.row.qualityRemarks }}</p>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="包装要求" align="center" width="200">
        <template v-slot="scope">
          <div>
            <el-popover placement="left" width="350" trigger="click">
              <div style="white-space: pre-line">
                {{ scope.row.pkgRemarks }}
              </div>
              <div class="quality-box" slot="reference">
                <p style="">{{ scope.row.pkgRemarks }}</p>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="件数" align="center" prop="piece" width="60">
      </el-table-column>
      <el-table-column
        label="目的国家"
        align="center"
        prop="country"
        width="100"
      >
      </el-table-column>
    </el-table>
    <!-- 分类查询分页信息 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDetailReport"
    />
  </div>
</template>

<script>
import {
  listDetailReport,
  exportDetailReport,
  dictMatching,
} from "../../api/report"; //物料接口
import PrintPage from "../../components/Report/detailPrint.vue"; //打印组件
export default {
  name: "Detail",
  data() {
    return {
      // 遮罩层
      loading: true,
      //物料数据最大高度
      maxHeight: null,
      //用料方式
      optionsSupplyType: [],
      //物料大类下标
      sortIndex: null,
      // 计划单执行明细查询
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        supplyType: "",
      },
      basicfileList: [],
      // 总条数
      total: 0,
      //打印名称
      printName: "",
      printTypeName: "",
      //打印组件状态
      printStatus: false,
      //打印数据
      printData: [],
    };
  },
  created() {
    this.getSupplyType();
    this.getDetailReport();

    let time = new Date("2021-10-31T00:00:00.000+0800");
    console.log(
      time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
    );
  },

  methods: {
    //报表
    getDetailReport() {
      listDetailReport(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.basicfileList = res.rows;
          this.getDecimal();
          this.total = res.total;
          this.maxHeight = `${document.documentElement.clientHeight}` - 220;
          this.loading = false;
        }
      });
    },

    // 获取供货方式
    getSupplyType() {
      return new Promise((resolve) => {
        dictMatching("om_supply_type").then((res) => {
          if (res.code == 200) {
            this.optionsSupplyType = res.data;
            resolve();
          }
        });
      });
    },

    //点击料品大类
    handleSort(data, index) {
      this.sortIndex = index;
      this.queryParams.supplyType = data.dictValue;
      this.getDetailReport();
    },

    // 查询所有
    checkleAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 100,
        supplyType: "",
      };
      this.sortIndex = null;
      this.getDetailReport();
    },

    //导出
    handleExport() {
      let queryParams = this.queryParams;
      this.$confirm(`是否确认导出销售订单明细表?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportDetailReport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 打印
    handlePrint() {
      let number = 1;
      this.basicfileList.forEach((item) => {
        item.number = number++;
      });
      this.printData = this.basicfileList;
      this.printName = "销售订单明细表";
      this.printStatus = true;
      setTimeout(() => {
        this.$print(this.$refs.startPrint.$refs.print);
      }, 0);
    },

    // 小数位数
    getDecimal() {
      if (this.basicfileList.length > 0) {
        this.basicfileList.forEach((item) => {
          if (item.quantity !== null && item.quantity !== undefined) {
            item.quantity = parseFloat(item.quantity).toFixed(2);
          }
          if (item.wmQuantity !== null && item.wmQuantity !== undefined) {
            item.wmQuantity = parseFloat(item.wmQuantity).toFixed(2);
          }
          if (item.wiQuantity !== null && item.wiQuantity !== undefined) {
            item.wiQuantity = parseFloat(item.wiQuantity).toFixed(2);
          }
          if (item.notWiQuantity !== null && item.notWiQuantity !== undefined) {
            item.notWiQuantity = parseFloat(item.notWiQuantity).toFixed(2);
          }
        });
      }
    },

    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },
  },

  components: {
    PrintPage,
  },
  filters: {
    filterDeliver(status) {
      switch (status) {
        case "0":
          return "预计";
          break;
        case "1":
          return "确认";
          break;
        default:
          return "";
      }
    },
  },
};
</script>
<style lang="scss">
.om-report-box {
  .el-range-editor--medium.el-input__inner {
    height: 32px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #333;
  }
  .quality-box {
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 180px;
      margin: 0;
    }
  }
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range-separator {
    line-height: 24px;
  }
  .sort-active {
    background: #1890ff !important;
    border-color: #1890ff !important;
    color: #ffffff !important;
  }
  .el-select {
    width: 150px;

    .el-input {
      width: 150px !important;
    }

    margin-right: 15px;

    .el-input__inner {
      width: 150px;
    }
  }

  .el-input--medium .el-input__icon {
    line-height: 28px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
  .material-sort {
    span {
      font-size: 14px;
      padding: 0px 15px;
      background: #f4f4f5;
      color: #999;
      display: inline-block;
      border-radius: 3px;
      margin-left: 5px;
      margin-right: 5px;
      cursor: pointer;
      line-height: 26px;
      border: 1px solid #e9e9eb;
    }
  }
}
</style>
